<template>
    <section>
        <div class="wrapper">
            <h1>投票选举</h1>
            <ul>
                <!-- <li @click="$troute.query('mvVote');">
                    <a>
                        <img src="@/mobile/imgs/vote-1.jpg" alt="">
                        <h2>第十五届工会委员会选举</h2>
                    </a>
                    <p>点击查看详情</p>
                </li>
                <li @click="$troute.query('mvVote');">
                    <a>
                        <img src="@/mobile/imgs/vote-2.jpg" alt="">
                        <h2>第十五届经费审查委员会<br/>选举</h2>
                    </a>
                    <p>点击查看详情</p>
                </li>
                <li @click="$troute.query('mvVote');">
                    <a>
                        <img src="@/mobile/imgs/vote-3.jpg" alt="">
                        <h2>第十五届女职工委员会<br/>选举</h2>
                    </a>
                    <p>点击查看详情</p>
                </li> -->
                <li v-for="(item,index) in voteList" :key="index" @click="tap(item.stauts,item.id)">
                    <a>
                        <img src="@/mobile/imgs/vote-1.jpg" alt="">
                        <h2>{{ item.title }}</h2>
                    </a>
                    <p>点击查看详情</p>
                </li>
            </ul>
        </div>
    </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

export default {
    data(){
        return{
            // status: '', // 选举状态
            // id: '',     // 选举活动编号
            // title: '',  // 选举活动名称
            voteList: [],
        }
    },
    methods:{
        voteActivityList(){
            api.voteActivityList().then(res => {
                this.voteList=res.data;
            });
        },
        // 跳转活动详情
        tap(status,id) {
            var data = { id };
            this.$troute.query("mvVote", data);
        },
    },
    mounted(){
        this.voteActivityList();
    },
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
}

.wrapper{
    padding: 25px;
    >h1{
        position: relative;
        font-size: 24px;
        margin-bottom: 25px;
        &::after{
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 96px;
            height: 4px;
            background-color: #9C1017;
        }
    }
    ul li{
        margin-top: 20px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 3px 9px #D0D0D0;
        overflow: hidden;
        a{
            position: relative;
            display: block;
            h2{
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                color: #fff;
                font-size: 24px;
                text-align: center;
                transform: translateY(-50%);
            }
        }
        p{
            margin: 12px 20px;
            font-size: 15px;
            background: url(../imgs/more.png) no-repeat right center;
            background-size: 8px 13px;
        }
    }
}
</style>